<!--
 * @Descripttion: 首页
 * @Author: liujx
 * @Date: 2020-06-30 17:36:42
--> 
<template>
  <div>
    <div class="flex a-center header a-around">
      <van-image
        width="50"
        height="38"
        round
        src="https://gw.alicdn.com/tfs/TB1CoEwVrvpK1RjSZFqXXcXUVXa-185-144.png?getAvatar=1"
      />
      <van-search class="header-search" v-model="value" placeholder="请输入搜索关键词" @click="onSearch"></van-search>
      <van-icon class="header-service" name="service-o" size="20px" />
    </div>

    <van-swipe class="home" :autoplay="1500" indicator-color="white">
      <van-swipe-item class="home-swipe" v-for="(image, index) in images" :key="index">
        <van-image width="100%" height="100%" :src="image" />
      </van-swipe-item>
    </van-swipe>

    <van-grid direction="horizontal" :column-num="2" :border="false">
      <van-grid-item to="/goods">
        <div class="flex menu j-around a-center">
          <van-image
            width="48"
            height="48"
            src="https://image1.suning.cn/uimg/cms/img/158225094251284751.png?format=_is_120w_120h.webp"
            round
          />
          <div class="flex column j-around text">
            <div>作品征集</div>
            <div>征集优质的设计作品</div>
          </div>
        </div>
      </van-grid-item>
      <van-grid-item to="/user">
        <div class="flex menu j-around a-center">
          <van-image
            width="48"
            height="48"
            src="//image1.suning.cn/uimg/cms/img/158512812425928976.png"
            round
          />
          <div class="flex column j-around text">
            <div>活动排行榜</div>
            <div>每周对热闹活动更新</div>
          </div>
        </div>
      </van-grid-item>
    </van-grid>

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-tabs v-model="active">
        <van-tab title="推荐" class="sales">
          <div>
            <ul class="card">
              <img width="100%" src="https://img.yzcdn.cn/vant/cat.jpeg" />
              <span>520LOVE献爱活动</span>
              <span>适用于鲜花丨简约丨情人节</span>
              <div class="price">
                <span>￥</span>
                <span>69.1</span>
                <span>拓客372人</span>
              </div>
            </ul>
            <ul class="card">
              <img width="100%" src="https://img.yzcdn.cn/vant/cat.jpeg" />
              <span>520LOVE献爱活动</span>
              <span>适用于鲜花丨简约丨情人节</span>
              <div class="price">
                <span>￥</span>
                <span>69.1</span>
                <span>拓客372人</span>
              </div>
            </ul>
            <ul class="card">
              <img width="100%" src="https://img.yzcdn.cn/vant/cat.jpeg" />
              <span>520LOVE献爱活动</span>
              <span>适用于鲜花丨简约丨情人节</span>
              <div class="price">
                <span>￥</span>
                <span>69.1</span>
                <span>拓客372人</span>
              </div>
            </ul>
          </div>
          <div>
            <div class="tip">
              <p>当前·活动</p>
              <p>您附近正在开展的活动</p>
            </div>
            <ul class="card">
              <img width="100%" src="https://img.yzcdn.cn/vant/cat.jpeg" />
              <span>520LOVE献爱活动</span>
              <span>适用于鲜花丨简约丨情人节</span>
              <div class="price">
                <span>￥</span>
                <span>69.1</span>
                <span>拓客372人</span>
              </div>
            </ul>
            <ul class="card">
              <img width="100%" src="https://img.yzcdn.cn/vant/cat.jpeg" />
              <span>520LOVE献爱活动</span>
              <span>适用于鲜花丨简约丨情人节</span>
              <div class="price">
                <span>￥</span>
                <span>69.1</span>
                <span>拓客372人</span>
              </div>
            </ul>
            <ul class="card">
              <img width="100%" src="https://img.yzcdn.cn/vant/cat.jpeg" />
              <span>520LOVE献爱活动</span>
              <span>适用于鲜花丨简约丨情人节</span>
              <div class="price">
                <span>￥</span>
                <span>69.1</span>
                <span>拓客372人</span>
              </div>
            </ul>
          </div>
        </van-tab>

        <van-tab title="收藏">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
          <div class="collect">
            <li v-for="item in list" :key="item">
              <img width="100%" src="https://img.yzcdn.cn/vant/cat.jpeg" />
              <span>520LOVE献爱活动</span>
              <span>适用于鲜花丨简约丨情人节</span>
              <div class="price">
                <span>￥</span>
                <span>69.1</span>
                <span>拓客372人</span>
              </div>
            </li>
            </div>
          </van-list>
        </van-tab>
      </van-tabs>
    </van-pull-refresh>
  </div>
</template>

<script>
import Vue from "vue";
import { Swipe, SwipeItem, Image as VanImage } from "vant";
import { Grid, GridItem, List, Cell, PullRefresh, Card, Button } from "vant";
import { Tag, Search, Toast, Tab, Tabs, Col, Row, Icon } from "vant";

Vue.use(Icon)
  .use(Col)
  .use(Row)
  .use(Tab)
  .use(Tabs)
  .use(Search)
  .use(Tag)
  .use(Button)
  .use(Card)
  .use(PullRefresh)
  .use(Cell)
  .use(List)
  .use(Grid)
  .use(GridItem)
  .use(VanImage)
  .use(Swipe)
  .use(SwipeItem)
  .use(Toast);

export default {
  data() {
    return {
      images: [
        "https://p1.meituan.net/msmerchant/889c15470f060e51edbd92b523162b202647417.jpg@214w_120h_1e_1c",
        "https://p1.meituan.net/bbia/66fd7b3ea9b59d4687b42e07a514013593187.jpg@214w_120h_1e_1c",
        "https://p1.meituan.net/msmerchant/9e4e852d82b8749671f0fcacc7f79a38185869.jpg@214w_120h_1e_1c"
      ],
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      value: "",
      active: 0
    };
  },
  methods: {
    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.list = [];
          this.refreshing = false;
        }

        for (let i = 0; i < 9; i++) {
          this.list.push(this.list.length + 1);
        }
        this.loading = false;

        if (this.list.length >= 21) {
          this.finished = true;
        }
      }, 1000);
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
    onSearch() {
      this.$router.push('/history')
    }

  }
};
</script>
<style lang="less">
div {
  box-sizing: border-box;
}
li {
  box-sizing: border-box;
  list-style: none;
}
.home {
  height: 200px;
  margin: 0 6px;
  &-swipe {
    img {
      width: 100%;
      height: 100%;
      display: block;
    }
  }
}
/* 搜索 */
.header {
  //    background-color: #f8f8f8;
  margin: 0, 4px;
  &-search {
    flex: 1;
  }
  &-service {
    width: 30px;
    margin-left: 8px;
  }
}

/* 菜单 */
.van-grid-item__content {
  padding: 8px 6px 2px;
}

.menu {
  width: 100%;
  height: 75px;
  background-color: #fa6554;
  &-word {
    flex-direction: column;
  }
}

/* 文字 */
.text {
  height: 100%;
}

.text :nth-child(1) {
  height: 15px;
  color: #fff;
}

.text :nth-child(2) {
  height: 15px;
  font-size: 10px;
  color: #fff;
}
/* 商品推荐 */
.sales {
  display: flex;
  width: 100%;
}

.sales div {
  flex: 1;
}

.sales div:nth-child(1) {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
  margin: 6px;
}

.card img {
  // height: 200px;
  flex: 1;
}

.card > span {
  margin: 2px 2px;
  flex: 1;
  font-size: 14px;
  line-height: 20px;
  overflow: hidden;
}
.price {
  display: flex;
  align-items: flex-end;
}
.price span:nth-child(1) {
  width: 15px;
  font-size: 8px;
}
.price span:nth-child(2) {
  width: 30px;
}
.price span:nth-child(-n + 2) {
  line-height: 20px;
  color: #f42;
  font-weight: bold;
}
.price span:nth-child(3) {
  flex: 1;
  text-align: right;
  font-size: 10px;
  line-height: 15px;
}
.tip {
  margin: 5px;
  height: 100px;
  border: 1px solid #386e7e;
}
.tip > p {
  text-align: center;
}
.tip > p:nth-child(1) {
  font-size: 25px;
  font-weight: 300;
  line-height: 20px;
}
.tip > p:nth-child(2) {
  margin-top: -5px;
}

/* 收藏 */
.collect {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 5px;
}
.collect li {
  padding: 5px;
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
}
li>span {
  margin: 2px 2px;
  flex: 1;
  font-size: 14px;
  line-height: 20px;
  overflow: hidden;
}
</style>
